<template>
  <div class="app-container">
    <el-form
      class="searchform"
      :model="queryParams"
      size="small"
      :inline="true"
    >
      <el-form-item label="合同编号">
        <el-input
          style="width: 200px"
          v-model="queryParams.agreementNumber"
          placeholder="请输入"
          @keyup.enter.native="handleSearch"
        ></el-input>
      </el-form-item>
      <el-form-item label="客户">
        <el-input
          style="width: 300px"
          v-model="queryParams.organizationName"
          placeholder="请输入"
          @keyup.enter.native="handleSearch"
        ></el-input>
      </el-form-item>
      <el-form-item label="签订日期" v-if="queryParams.paymentState == '0'">
        <el-date-picker
          style="width: 250px"
          v-model="queryParams.signDate"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :unlink-panels="true"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="创建日期" v-if="queryParams.paymentState == '1'">
        <el-date-picker
          style="width: 250px"
          v-model="queryParams.createDate"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :unlink-panels="true"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="备注/附言/部门">
        <el-input
          style="width: 200px"
          v-model="queryParams.remarks"
          placeholder="请输入"
          @keyup.enter.native="handleSearch"
        ></el-input>
      </el-form-item>
      <el-form-item label="收款账户" v-if="queryParams.paymentState == 1">
        <el-input
          style="width: 200px"
          v-model="queryParams.paymentAccount"
          placeholder="请输入"
          @keyup.enter.native="handleSearch"
        ></el-input>
      </el-form-item>
      <el-form-item label="收款状态">
        <el-select
          style="width: 150px"
          v-model="queryParams.paymentState"
          :clearable="false"
          @change="handleSearch"
        >
          <el-option label="待收款" :value="0"></el-option>
          <el-option label="已收款" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" " label-width="20px">
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="table-wrapper">
      <el-table v-loading="tableLoading" height="300px" :data="tableList">
        <el-table-column
          label="日期/编号"
          align="center"
          prop=""
          width="110"
          key="createTime"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d}") }}</span>
            <br />
            <span>{{ scope.row.agreementNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="合同编号"
          align="center"
          prop=""
          min-width="100"
          key="agreementNumber"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.agreementNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="客户/项目"
          align="center"
          prop=""
          show-overflow-tooltip
          min-width="250"
          key="organizationName"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.organizationName }}</span>
            <br />
            <span>{{ scope.row.itemName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="业务员/部门"
          align="center"
          prop=""
          min-width="180"
          key="businessUserName"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.businessUserName }}</span>
            <br />
            <span>{{ scope.row.deptName }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="应收金额"
          align="center"
          prop="actualAmount"
          min-width="80"
          key="actualAmount"
          v-if="queryParams.paymentState == '0'"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.actualAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="应收余额"
          align="center"
          prop="unPaymentAmount"
          min-width="80"
          key="unPaymentAmount"
          v-if="queryParams.paymentState == '0'"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.unPaymentAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="收款金额"
          align="center"
          prop="agreementPaymentAmount"
          min-width="80"
          key="agreementPaymentAmount"
          v-if="queryParams.paymentState == '1'"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.agreementPaymentAmount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="收款账户"
          align="center"
          prop="paymentAccount"
          min-width="120"
          key="paymentAccount"
          v-if="queryParams.paymentState == '1'"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.paymentAccount }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="收款日期"
          align="center"
          prop="paymentTime"
          min-width="95"
          key="paymentTime"
          v-if="queryParams.paymentState == '1'"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.paymentTime, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="创建日期"
          align="center"
          prop="paymentCreateTime"
          min-width="95"
          key="paymentCreateTime"
          v-if="queryParams.paymentState == '1'"
        >
          <template slot-scope="scope">
            <span>{{
              parseTime(scope.row.paymentCreateTime, "{y}-{m}-{d}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="备注/附言"
          align="center"
          prop="remark"
          min-width="100"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.remark }}</span>
            <br />
            <span>{{ scope.row.postscript }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          prop=""
          width="120"
          key="operation"
          v-if="queryParams.paymentState == '0'"
        >
          <template slot-scope="scope">
            <el-link
              style="margin-right: 6px"
              type="primary"
              @click="handleCollectMoney(scope.row)"
              v-if="
                checkPermi(['basic:agreementPaymentRecord:add']) &&
                scope.row.paymentState == 0 &&
                scope.row.beOperate
              "
              >收款</el-link
            >
            <el-link
              type="primary"
              @click="handleCollectMoneyRecord(scope.row)"
              v-if="scope.row.beOperate"
              >收款记录</el-link
            >
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          prop=""
          width="100"
          key="operation2"
          v-if="queryParams.paymentState == '1'"
        >
          <template slot-scope="scope">
            <el-link
              type="primary"
              v-if="
                checkPermi(['basic:agreementPaymentRecord:edit']) &&
                scope.row.beOperate
              "
              @click="handleEditCollectRecord(scope.row)"
              >修改</el-link
            >
            <el-link
              style="margin-left: 10px"
              type="danger"
              v-if="
                checkPermi(['basic:agreementPaymentRecord:delete']) &&
                scope.row.beOperate
              "
              @click="handleDeleteCollectRecord(scope.row)"
              >删除</el-link
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        :total="tableTotal"
        @pagination="getTableListData"
      ></pagination>
    </div>

    <!-- 收款弹框 -->
    <CollectMoneyDialog
      :show.sync="showCollectMoneyDialog"
      :row="currRow"
      :recordRow="currRecordRow"
      @refresh="getTableListData"
    ></CollectMoneyDialog>

    <!-- 收款记录弹框 -->
    <CollectMoneyRecordDialog
      :show.sync="showCollectMoneyRecordDialog"
      :row="currRow"
      @refresh="getTableListData"
    ></CollectMoneyRecordDialog>
  </div>
</template>

<script>
import CollectMoneyDialog from "./components/CollectMoneyDialog.vue";
import CollectMoneyRecordDialog from "./components/CollectMoneyRecordDialog.vue";
import {
  collectMoneyList,
  collectMoneyRecordDelete,
} from "@/api/person/collectmoney";

export default {
  name: "collectmoney",
  dicts: [],
  components: {
    CollectMoneyDialog,
    CollectMoneyRecordDialog,
  },
  data() {
    return {
      queryParams: {},
      tableLoading: false,
      tableList: [],
      tableTotal: 0,

      showCollectMoneyDialog: false,
      currRow: {},
      currRecordRow: null,

      showCollectMoneyRecordDialog: false,
    };
  },
  created() {
    this.initQueryParams();
    this.getTableListData();
  },
  methods: {
    // 初始化查询参数
    initQueryParams() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        agreementNumber: "",
        organizationName: "",
        signDate: [],
        createDate: [],
        remarks: "",
        paymentAccount: "",
        paymentState: 0,
      };
    },
    // 获取查询参数
    getQueryParams() {
      const params = JSON.parse(JSON.stringify(this.queryParams));
      params.beginTimeStart = params.signDate ? params.signDate[0] : "";
      params.beginTimeEnd = params.signDate ? params.signDate[1] : "";
      delete params.signDate;
      params.paymentCreateStart = params.createDate ? params.createDate[0] : "";
      params.paymentCreateEnd = params.createDate ? params.createDate[1] : "";
      delete params.createDate;
      return params;
    },
    // 获取表格数据
    getTableListData() {
      this.tableLoading = true;
      const params = this.getQueryParams();
      collectMoneyList(params)
        .then((res) => {
          this.tableLoading = false;
          this.tableList = res.rows || [];
          this.tableTotal = res.total || 0;
        })
        .catch((err) => {
          this.tableLoading = false;
        });
    },
    // 点击搜索
    handleSearch() {
      this.queryParams.pageNum = 1;
      this.getTableListData();
    },
    // 点击重置
    handleReset() {
      this.initQueryParams();
      this.getTableListData();
    },
    // 点击收款
    handleCollectMoney(row) {
      this.currRow = row;
      this.currRecordRow = null;
      this.showCollectMoneyDialog = true;
    },
    // 点击收款记录
    handleCollectMoneyRecord(row) {
      this.currRow = row;
      this.showCollectMoneyRecordDialog = true;
    },
    // 点击修改收款记录
    handleEditCollectRecord(row) {
      this.currRow = row;
      this.currRecordRow = row;
      this.showCollectMoneyDialog = true;
    },
    // 点击删除收款记录
    handleDeleteCollectRecord(row) {
      this.$modal
        .confirm("是否确认删除该收款记录?")
        .then(() => {
          return collectMoneyRecordDelete(row.paymentRecordId);
        })
        .then(() => {
          this.$modal.msgSuccess("删除成功");
          this.getTableListData();
        })
        .catch((err) => {});
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
}
</style>
